<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="jquery/jquery-ui.min.css" />
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>

<script type="text/javascript">
	var currentMsgHead = 0;
	
	$(function() {
		$("#emailDialog").dialog({ 
			autoOpen: false,
			modal: true
		});
		
		$("#shareButton").button().on("click", function(event) {
			openDialog();
		});
		
		$("#sendMailButton").on("click", function(event){
			$.ajax({
				url : "/lab/shareLink",
				type: "POST",
				data : { email : $("#email").val()},
				success : function(response) {
					$("#email").val("");
					$("#emailDialog").dialog("close");
				}
			});  
		}); 
		
		$("#sendButton").button().on("click", function(event) {
			sendMessage();
		});

		$("#chatInput").on("keydown", function(event) {
			if (event.keyCode == 13) {
				sendMessage();
			}
		});
		
// 		(function poll() {
// 		    setTimeout(function () {
// 		    	$.ajax({
// 					url : "/lab/chat",
// 					type: "GET",
// 					data: {msgHead : currentMsgHead},
// 					complete: poll,
// 					success : function(response) {
// 						var jsonResponse=$.parseJSON(response);
// 						$.each(jsonResponse.messages, function(index, msg) {
// 							var currentDate = msg.timeStamp;
// 							var timeContainer = $("<div class='timeContainer'></div>");
// 							timeContainer.append(currentDate);
// 							if(msg.user!=""){
// 								timeContainer.append(" -- " + msg.user);
// 							}
// 							else{
// 							    timeContainer.append(" -- Me");}
					
// 							var bubbleContainer = $("<div class='bubble'></div");
// 							bubbleContainer.append(constructChatBubble(msg.content));
// 							bubbleContainer.append(timeContainer);
					
// 							$("#content").append(bubbleContainer);
					
// 							$("#content").scrollTop($("#content").prop("scrollHeight"));
// 						});
						
// 						//update currentMsgHead to new value
// 						currentMsgHead = jsonResponse.msgHead;
// 					}
// 				});
// 		    }, 1000);
// 		})();
	});
	
	function sendMessage() {
		var message = readChatMessage();
		if (message === "")
			return;

		//post the new msg to server
		$.ajax({
			url : "/lab/chat",
			type: "POST",
			data : JSON.stringify({
				msgHead : currentMsgHead,
				content : message,
				user : $("#user").val()
			}),
			dataType : "json",
			success : function(response) {
				//the response will contain a list of new msgs whose IDs are greater than currentMsgHead

				//construct the msgs and append to the window
				//use jquery.each because we return a list of msgs
				$.each(response.messages, function(index, msg) {
					var currentDate = msg.timeStamp;
					var timeContainer = $("<div class='timeContainer'></div>");
					timeContainer.append(currentDate);
					if(msg.user!=""){
						timeContainer.append(" -- " + msg.user);
					}
					else{
					    timeContainer.append(" -- Me");}
			
					var bubbleContainer = $("<div class='bubble'></div");
					bubbleContainer.append(constructChatBubble(msg.content));
					bubbleContainer.append(timeContainer);
			
					$("#content").append(bubbleContainer);
			
					$("#content").scrollTop($("#content").prop("scrollHeight"));
				});		
				//update currentMsgHead to new value
				currentMsgHead = response.msgHead;
			}

		});  
		
	}

	function readChatMessage() {
		var message = $("#chatInput").val();
		$("#chatInput").val("");

		return message;
	}

	function constructChatBubble(message) {
		var chatBubble = $("<div class='triangle-isosceles'></div>");
		chatBubble.append(message);
		return chatBubble;
	}
	
	function openDialog() {
		$("#emailDialog").dialog("open");
	}
	
	function shareLink() {
		
	}
</script>
<title>Lab 3</title>
</head>
<body>
	<div id="header">
		<h1>Lab 3 - (not yet online) Chat</h1>
	</div>

	<div id="content"></div>

	<div id="footer">
		<div id="control">
 			<label for="user">User</label>
			<input type="text" id="user"></input>
			<label for="chatInput">Chat</label>
			<input type="text" id="chatInput"></input>
			<input type="button" id="sendButton" value="Send" />
			<input type="button" id="shareButton" value="Share" />
		</div>
		<div id="emailDialog" title="Send URL">
			<form>
				<label for="email">Enter email:</label>
				<input type="text" id="email" />
				<input type="button" id="sendMailButton" value="Send" />
			</form>
		</div>
	</div>
</body>
</html>